<template>
    <div class="rightHandle" :class="!isShow?'packUp':''">
        <div class="topBtn" v-show="isShow">
			<i class="el-icon-s-unfold topIcon" @click="setIsShow"></i>
		</div>
		<div class="topBtn unfold" v-show="!isShow">
			<i class="el-icon-s-fold topIcon" @click="setIsShow"></i>
		</div>
		<div class="handleArea">
			<div class="navTitle">
				<div v-for="item in navTitleItem" class="navItemList" :key="item" @click="clickNavItem(item)" :class="navName==item?'selectNavItem':''">{{ item }}</div>
			</div>
			<div v-show="navName=='画布设置'">
				<div class="itemCont">
					<div class="itemTitle">功能选择</div>
					<div class="itemBtns">
						<i class="el-icon-rank pointer" title="移动素材" @click="selectItemBtn(1)" :class="itemBtnsI==1?'selectItemBtn':''"></i>
						<i class="el-icon-copy-document pointer" title="移动画布" @click="selectItemBtn(2)" :class="itemBtnsI==2?'selectItemBtn':''"></i>
					</div>
				</div>
				<div class="separate">基础设置</div>
				<div class="itemCont">
					<div class="itemTitle">辅助线</div>
					    <el-checkbox v-model="fromData.checked"></el-checkbox>
				</div>
				<div class="itemCont">
					<div class="itemTitle">画布宽</div>
					    <el-input v-model="fromData.canvasW" placeholder="请输入内容"></el-input>
				</div>
				<div class="itemCont">
					<div class="itemTitle">画布高</div>
					    <el-input v-model="fromData.canvasH" placeholder="请输入内容"></el-input>
				</div>
				<div class="itemCont">
					<div class="itemTitle">运行页面是否自适应</div>
					    <el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					        <el-option label="是" value="1"></el-option>
							<el-option label="否" value="2"></el-option>
					      </el-select>
				</div>
				<div class="separate">详细设置</div>
				<div class="itemCont">
					<div class="itemTitle">背景颜色</div>
					    <el-color-picker v-model="fromData.bgColors" :predefine="$globalData.predefineColors"></el-color-picker>
				</div>
				<div class="itemCont">
					<div class="itemTitle">边框大小</div>
					    <el-slider style="width: 90%;margin-left: 5%;" :max="10" v-model="fromData.borderW"></el-slider>
				</div>
				<!-- <div class="itemCont">
					<div class="itemTitle">边框样式</div>
					    <el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					        <el-option label="是" value="1"></el-option>
					    	<el-option label="否" value="2"></el-option>
					      </el-select>
				</div> -->
				<div class="itemCont">
					<div class="itemTitle">边框颜色</div>
					    <el-color-picker v-model="fromData.borderColor" :predefine="$globalData.predefineColors"></el-color-picker>
				</div>
			</div>
			<div v-show="navName=='高级设置'">
				<div v-if="isInput">
					<div class="itemCont" v-if="isInputable">
						<div class="itemTitle">文本内容</div>
						<el-row>
						  	<el-col :span="16">
								  <el-input v-model="fromData.input" placeholder="请输入内容"></el-input>
						  	</el-col>
						  	<el-col :span="8">
								  <el-button style="margin-left: 10px;" type="primary" @click="getInput">修改</el-button>
						  	</el-col>
						</el-row>
					</div>
					<div class="itemCont" v-if="isCityable">
						<div class="itemTitle">城市选择</div>
						<addressD :childrenType='1' :value='addressValue' @getAddressData="getAddressData"></addressD>
					</div>
					<div class="itemCont" v-if="!isCityable">
						<div class="separate">数据来源</div>
						<el-row class="itemSelect">
							<el-col :span="6"><span>AI/AO端</span></el-col>
							<el-col :span="16">
 							  <el-select v-model="fromData.portType1" placeholder="请选择">
 							    <el-option label="AI" value="AI"></el-option>
 							    <el-option label="AO" value="AO"></el-option>
 							  </el-select>
 							</el-col>
				    	</el-row>
						<el-row class="itemSelect">
							<el-col :span="6"><span>DI/DO端</span></el-col>
							<el-col :span="16">
 							  <el-select v-model="fromData.portType2" placeholder="请选择">
 							    <el-option label="DI" value="DI"></el-option>
 							    <el-option label="DO" value="DO"></el-option>
 							  </el-select>
							</el-col>
						</el-row>
					</div>

					<div class="separate">字体设置</div>
					<div class="itemCont">
						<div class="itemTitle">字体大小</div>
						    <el-slider style="width: 90%;margin-left: 5%;" :min="14" :max="100" v-model="fromData.inputFZ"></el-slider>
					</div>
					<div class="itemCont">
						<div class="itemTitle">字体颜色</div>
						<el-color-picker v-model="fromData.inputColor"></el-color-picker>
					</div>
				</div>
				<!-- <div class="itemCont">
					<div class="itemTitle">隐藏画布栏目</div>
					<el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					    <el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					  </el-select>
				</div>
				
				<div class="itemCont">
					<div class="itemTitle">修改导航条名称</div>
					<el-input v-model="fromData.input" placeholder="请输入内容"></el-input>
				</div>
				<div class="itemCont">
					<div class="itemTitle">导航条浮动</div>
					<el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					    <el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					  </el-select>
				</div>
				<div class="itemCont">
					<div class="itemTitle">导航条定位</div>
					<el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					    <el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					  </el-select>
				</div>
				<div class="itemCont">
					<div class="itemTitle">导航条文字颜色</div>
					<el-color-picker v-model="fromData.color1"></el-color-picker>
				</div>
				<div class="itemCont">
					<div class="itemTitle">导航条切换颜色</div>
					<el-color-picker v-model="fromData.color1"></el-color-picker>
				</div>
				<div class="itemCont">
					<div class="itemTitle">画布切换动画效果</div>
					<el-select style="width: 100%;" v-model="fromData.value" placeholder="请选择">
					    <el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					  </el-select>
				</div> -->
			</div>
		</div>
    </div>
</template>

<script>
	import equipment from '../../utils/equipment.js'
	import Bus from '@/utils/bus.js'
	import addressD from '@/components/address'
export default {
	props:[],
	components: {
		addressD
	},
    data() {
	    return {
			weatherID:'',
			addressValue:[],
			isInput:false,
			isInputable:false,
			isCityable:false,
			isShow: true,
			navTitleItem: ['画布设置', '高级设置'],
			// navTitleItem: ['画布设置'],
			navName: '画布设置',
			itemBtnsI: 1,
			fromData: {
				checked: true, // 辅助线
				canvasW: 0, // 画布宽
				canvasH: 0 ,// 画布高
				bgColors: '#FFFFFF' ,// 背景颜色
				borderW: 1 ,// 边框宽度
				borderColor: '#dcdcdc', //边框颜色
				input:'',//文本内容
				inputFZ:0,//字体大小
				inputColor:'',//字体颜色
				addressValue:'',//天气地址
			}
        }
    },
	watch:{
		// 监听辅助线开关
		'fromData.checked'(newData){
			if (newData) {
				equipment.show('.doc_canvas_subline')
			} else{
				equipment.hide('.doc_canvas_subline')
			}
		},
		// 监听画布修改宽度
		'fromData.canvasW'(newData){
			equipment.setWidth('.doc_canvas_box', newData)
		},
		// 监听画布修改高度
		'fromData.canvasH'(newData){
			equipment.setHeight('.doc_canvas_box', newData)
		},
		// 监听画布修改背景颜色
		'fromData.bgColors'(newData){
			equipment.setBgColor('.doc_canvas_box', newData)
		},
		// 监听画布修改边框宽度
		'fromData.borderW'(newData){
			equipment.setBorder('.doc_canvas_box', newData)
		},
		// 监听画布修改边框颜色
		'fromData.borderColor'(newData){
			equipment.setBorderColor('.doc_canvas_box', newData)
		},
		// 监听字体大小
		'fromData.inputFZ'(newData){
			$('.selected_dom').css('font-size', newData)
		},
		// 监听字体颜色
		'fromData.inputColor'(newData){
			$('.selected_dom').css('color', newData)
		},
	},
	mounted() {
		if (this.itemBtnsI==1) {
			this.$emit('itemBtnsI','1')
		}else{
			this.$emit('itemBtnsI','2')
		}
		equipment.init('.doc_canvas_box', (res) => {
			this.fromData.canvasH = res.vesselH
			this.fromData.canvasW = res.vesselW
		})

		Bus.$on('isInput', (data) => {
      	    if(data.text != ''){
				this.isInput = true
				this.navName = '高级设置'
				let id = data.id.substring(0,9)
				if(id == '1function'){ //时间
					this.isInputable = false
					this.isCityable = false
				}else if(id == '2function'){ //天气
					this.isCityable = true
					this.isInputable = false
					this.fromData.addressValue = '500000/500100' //默认为重庆市
					let c = '500000/500100'
					this.addressValue = c.split('/')
					this.weatherID = data.id
					console.log(data.text.split('\n')[1].split('\t')[0]);
				}else{
					this.isCityable = false
					this.isInputable = true
					this.fromData.input = data.text
					this.fromData.inputColor = data.color
				}
			}else{
				this.isInput = false
			}
      	})
	},
	methods:{
		getAddressData(e){
			let c = {
				id:this.weatherID,
				key:e.key,
				text:e.text.split('/')[1]
			}
			Bus.$emit('city', c)
		},
		getInput(){
			if(this.fromData.input){
				$('.selected_dom').text(this.fromData.input)
			}
		},
		setIsShow(){
			this.isShow = !this.isShow
		},
		clickNavItem(name){
			this.navName = name
		},
		selectItemBtn(i){
			this.itemBtnsI = i
			if (i==1) {
				equipment.notEditorDom('.doc_canvas_box')
				$('.doc_canvas_cont div').on('click', function(){
					// console.log()
					$(this).draggable({disabled: false}).resizable({disabled: false,aspectRatio: true,handles: "n, e, s, w, ne, se, sw, nw" } ).addClass('selected_dom')
				})
			} else{
				console.log(equipment)
				let start = {}
				let that = this
				$('.doc_canvas_cont div').draggable({disabled: true}).resizable({disabled: true}).removeClass('selected_dom').unbind('click')
				// equipment.dom = '.doc_canvas_box'
				$('.doc_canvas_box').draggable({
        		  cursor: 'move',
        		  disabled: false,
				  start: function(e,ui){
				  },
        		  stop: function (e,ui) { 
					  // 获取画布与视图的边距
					   let distance = {}
					  distance.left = $(e.target)[0].offsetLeft;
					  distance.top =  $(e.target)[0].offsetTop;
					  that.$emit('end',distance)
					  Bus.$emit('end',distance)
        		  }}
        		)
			}
			this.$emit('itemBtnsI',this.itemBtnsI.toString())
			Bus.$emit('itemBtnsI',this.itemBtnsI.toString())
			
		}
	}
}
</script>

<style scoped="scoped" lang="scss">
	.itemSelect{
		margin: 10px 0;
		span{
			font-size: 12px;
			line-height: 30px;
		}
	}
	.rightHandle{
		width: 240px;
		position: fixed;
		right: 0;
		bottom: 0;
		top: 60px;
		background: #41474a;
		border-left: 1px solid #d7d7d7;
		z-index: 2999;
		height: 100%;
		transition: all .5s;
		.topBtn{
			padding: 5px;
			.topIcon{
				color: #FFFFFF;
				font-size: 20px;
				cursor: pointer;
			}
		}
		.unfold{
			position: absolute;
			left: -30px;
			background: #41474a;
			border-radius: 0 0 0 3px;
		}
		.handleArea{
			.navTitle{
				display: flex;
				justify-content: space-evenly;
				white-space: nowrap;
				border-bottom: 1px solid #676c75;
				padding: 10px 0;
				.navItemList{
					color: #999ea8;
					cursor: pointer;
					// width: 50%;
					width: 100%;
					text-align: center;
				}
				.selectNavItem{
					color: #FFFFFF;
					position: relative;
					&::before{
						position: absolute;
						content: '';
						width: 100%;
						height: 1px;
						bottom: -11px;
						left: 0;
						background: #24B14E;
					}
				}
			}
			.itemCont{
				padding: 0 10px;
				margin-top: 10px;
				color: #FFFFFF;
				.itemTitle{
					font-size: 12px;
					margin-bottom: 10px;
					line-height: 24px;
				}
				.itemBtns{
					i{
						font-size: 20px;
						margin-right: 20px;
						padding: 2px;
						border: 1px solid #41474a;
					}
					.selectItemBtn{
						border-color: #24B14E;
					}
				}
				
			}
			.separate{
				width: 100%;
				text-align: center;
				position: relative;
				color: #FFFFFF;
				margin: 15px 0;
				&::before,&::after{
					position: absolute;
					width: 32%;
					height: 1px;
					background: #24B14E;
					content: '';
					top: 50%;
					margin-top: -1px;
				}
				&::before{
					left: 0;
				}
				&::after{
					right: 0;
				}
			}
			
		}
	}
	.packUp{
		right: -240px;
		
	}
	.pointer{
		cursor: pointer;
	}
	
</style>